<template>
  <div class="container">
    <h1>设备维护周期管理</h1>
    <table class="schedule-table">
      <thead>
        <tr>
          <th>周期</th>
          <th>班次</th>
          <th>下发时间</th>
          <!-- <th>操作</th> -->
        </tr>
      </thead>
      <tbody>
        <template v-for="(row, index) in scheduleData" >
          <tr v-for="(shift, idx) in row.shifts" :key="index + '-' + idx">
            <td v-if="idx === 0" :rowspan="row.shifts.length">{{ row.period }}</td>
            <td>{{ shift.name }}</td>
            <td>{{ shift.time }}</td>
            <!-- <td v-if="idx === 0" :rowspan="row.shifts.length">
              <button @click="openEditModal(index)" class="edit-btn">编辑</button>
              <button class="reset-btn" @click="restore(index)" >恢复默认</button>
            </td> -->
          </tr>
        </template>
      </tbody>
    </table>
    <!-- <button @click="openAddModal" class="add-btn">+ 添加周期</button> -->

    <!-- 编辑模态框 -->
    <div v-if="isEditModalOpen" class="modal">
      <div class="modal-content">
        <h2>编辑班次</h2>
        <div class="modal-body">
          <div v-for="(shift, i) in editingRow.shifts" :key="i" class="edit-row">
            <label>班次:</label>
            <input
              v-model="editingRow.shifts[i].name"
              type="text"
              class="input"
              placeholder="班次名"
            />
            <label>时间:</label>
            <input
              v-model="editingRow.shifts[i].time"
              type="text"
              class="input"
              placeholder="时间段"
            />
          </div>
        </div>
        <div class="modal-footer">
          <button @click="closeEditModal" class="cancel-btn">取消</button>
          <button @click="saveEdit" class="save-btn">保存</button>
        </div>
      </div>
    </div>

    <!-- 添加周期模态框 -->
    <div v-if="isAddModalOpen" class="modal">
      <div class="modal-content">
        <h2>添加周期</h2>
        <div class="modal-body">
          <label>周期:</label>
          <input
            v-model="newPeriod.period"
            type="text"
            class="input"
            placeholder="周期名称"
          />
          <div v-for="(shift, i) in newPeriod.shifts" :key="i" class="edit-row">
            <label>班次:</label>
            <input
              v-model="shift.name"
              type="text"
              class="input"
              placeholder="班次名"
            />
            <label>时间:</label>
            <input
              v-model="shift.time"
              type="text"
              class="input"
              placeholder="时间段"
            />
            <button @click="removeShift(i)" class="remove-btn">删除</button>
          </div>
          <button @click="addShift" class="add-shift-btn">+ 添加班次</button>
        </div>
        <div class="modal-footer">
          <button @click="closeAddModal" class="cancel-btn">取消</button>
          <button @click="saveNewPeriod" class="save-btn">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {list,saveEdit,restore} from "@/api/wushui/maintenance";
export default {
  data() {
    return {
      scheduleData: [],
      isEditModalOpen: false,
      isAddModalOpen: false,
      editingRow: null,
      editingIndex: null,
      newPeriod: {
        period: "",
        shifts: [{ name: "", time: "" }],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      list().then((response) => {
        this.scheduleData = response.rows;
        console.log('response:', response);
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },

    openEditModal(index) {
      this.isEditModalOpen = true;
      this.editingRow = JSON.parse(JSON.stringify(this.scheduleData[index]));
      this.editingIndex = index;
      console.log("console.log(this.editingRow)")
      console.log(this.editingRow)
    },
    restore(index) {

      this.editingRow = JSON.parse(JSON.stringify(this.scheduleData[index]));
      const period = this.editingRow.period;
      restore(period).then((response) => {
        this.getList();
        console.log('restore:', response);
         this.$message.success("恢复默认成功！");
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
      console.log("console.log(this.editingRow)")
      console.log(this.editingRow)
    },
    closeEditModal() {
      this.isEditModalOpen = false;
      this.editingRow = null;
      this.editingIndex = null;
    },
    saveEdit() {

      saveEdit(this.editingRow).then((response) => {
        this.getList();
        console.log('response:', response);
        this.closeEditModal();
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
      // this.$set(this.scheduleData, this.editingIndex, this.editingRow);
      console.log(this.editingRow)
    },
    openAddModal() {
      this.isAddModalOpen = true;
      this.newPeriod = {
        period: "",
        shifts: [{ name: "", time: "" }],
      };
    },
    closeAddModal() {
      this.isAddModalOpen = false;
    },
    addShift() {
      this.newPeriod.shifts.push({ name: "", time: "" });
    },
    removeShift(index) {
      this.newPeriod.shifts.splice(index, 1);
    },
    saveNewPeriod() {
      if (this.newPeriod.period && this.newPeriod.shifts.length > 0) {
        this.scheduleData.push(JSON.parse(JSON.stringify(this.newPeriod)));
        this.closeAddModal();
      } else {
        alert("请填写完整的周期和班次信息");
      }
    },
  },
};
</script>

<style scoped>
/* 与之前的样式保持一致 */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f6f8;
}

.container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #444;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.schedule-table th,
.schedule-table td {
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
}

.schedule-table th {
  background-color: #007bff;
  color: white;
}

.schedule-table td {
  background-color: #f9f9f9;
}

.schedule-table td button {
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  border: none;
}

.edit-btn {
  background: #007bff;
  color: white;
}

.reset-btn {
  background: #ddd;
  color: grey;
  cursor: not-allowed;
}

.add-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.modal-content h2 {
  margin-bottom: 20px;
  text-align: center;
}

.modal-body .edit-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.input {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  flex: 1;
  margin-left: 5px;
}

.modal-footer {
  text-align: right;
}

.cancel-btn {
  background: #ddd;
  margin-right: 10px;
}

.save-btn {
  background: #28a745;
  color: white;
}

.add-shift-btn {
  margin-top: 10px;
  padding: 5px 10px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.remove-btn {
  margin-left: 10px;
  padding: 5px 10px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
